import React from "react";
import { Table } from "antd";
import '../assets/css/detail.css'

function Detail() {
  const renderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    if (index === 20) {
      obj.props.colSpan = 0;
      obj.props.rowSpan = 0;
    }
    return obj;
  };
  
  // 粗抛槽
  const data1 = [
    {
      id: 1,
      categroy1: "粗抛槽",
      categroy2: "初配",
      title: "温度",
      unit: "℃",
      range: "30~100",
    },
    {
      id: 2,
      categroy1: "粗抛槽",
      categroy2: "初配",
      title: "时间",
      unit: "s",
      range: "31~100",
    },
    {
      id: 3,
      categroy1: "粗抛槽",
      categroy2: "初配",
      title: "KOH/NaOH",
      unit: "L",
      range: "32~100",
    },
    {
      id: 4,
      categroy1: "粗抛槽",
      categroy2: "补液",
      title: "H2O",
      unit: "L",
      range: "33~100",
    },
    {
      id: 5,
      categroy1: "粗抛槽",
      categroy2: "补液",
      title: "KOH/NaOH",
      unit: "L",
      range: "34~100",
    },
  ];
  // 预清洗槽
  const data2 = [
    {
      id: 6,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "温度",
      unit: "℃",
      range: "30~100",
    },
    {
      id: 7,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "时间",
      unit: "s",
      range: "31~100",
    },
    {
      id: 8,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "KOH/NaOH",
      unit: "L",
      range: "32~100",
    },
    {
      id: 9,
      categroy1: "预清洗槽",
      categroy2: "初配",
      title: "H2O2",
      unit: "L",
      range: "33~100",
    },
    {
      id: 10,
      categroy1: "预清洗槽",
      categroy2: "补液",
      title: "KOH/NaOH",
      unit: "L",
      range: "34~100",
    },
    {
      id: 11,
      categroy1: "预清洗槽",
      categroy2: "补液",
      title: "H2O",
      unit: "L",
      range: "33~100",
    },
    {
      id: 12,
      categroy1: "预清洗槽",
      categroy2: "补液",
      title: "H2O2",
      unit: "L",
      range: "34~100",
    },
  ];
  // 制绒槽
  const data3 = [
    {
      id: 13,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "温度",
      unit: "℃",
      range: "30~100",
    },
    {
      id: 14,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "时间",
      unit: "s",
      range: "31~100",
    },
    {
      id: 15,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "KOH/NaOH",
      unit: "L",
      range: "32~100",
    },
    {
      id: 16,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "添加剂种类",
      unit: "L",
      range: "33~100",
    },
    {
      id: 17,
      categroy1: "制绒槽",
      categroy2: "初配",
      title: "添加剂",
      unit: "L",
      range: "33~100",
    },
    {
      id: 18,
      categroy1: "制绒槽",
      categroy2: "补液",
      title: "H2O",
      unit: "L",
      range: "33~100",
    },
    {
      id: 19,
      categroy1: "制绒槽",
      categroy2: "补液",
      title: "H2O2",
      unit: "L",
      range: "34~100",
    },
    {
      id: 20,
      categroy1: "制绒槽",
      categroy2: "补液",
      title: "H2O3",
      unit: "L",
      range: "34~100",
    },
  ];
  // 总计
  const total = {
    id: 199999,
    categroy1: "总计",
    categroy2: "初配",
    title: "温度",
    unit: "℃",
    range: "30~100",
  }
  const data = [...data1, ...data2, ...data3, total];
  data.forEach((item, index) => {
    item.money = (index +1) * 10
  })

  const columns = [
    {
      title: "类别",
      dataIndex: "categroy1",
      key: "categroy1",
      width: 100,
      align: "center",
      colSpan: 3,
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {
            rowSpan: 1,
            colSpan: 1,
          },
        };
        if (row.categroy1 === "粗抛槽") {
          if (index === 0) {
            obj.props.rowSpan = 5;
          } else {
            obj.props.rowSpan = 0;
          }
        } else if(row.categroy1 === "预清洗槽") {
          if (index === 5) {
            obj.props.rowSpan = 7;
          } else {
            obj.props.rowSpan = 0;
          }
        } else if(row.categroy1 === "制绒槽") {
          if (index === 12) {
            obj.props.rowSpan = 8;
          } else {
            obj.props.rowSpan = 0;
          }
        } else if(row.categroy1 === "总计") {
          if (index === 20) {
            obj.props.colSpan = 6;
            let total = data.filter(item => item.categroy1 !== "总计").reduce((prev, cur) => {
              return prev + cur.money
            }, 0)
            obj.children = `金额总计：${total} 元`
          }
        }
        return obj;
      },
    },
    {
      title: "类别",
      colSpan: 0,
      dataIndex: "categroy2",
      key: "categroy2",
      width: 100,
      align: "center",
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {
            rowSpan: 1,
            colSpan: 1,
          },
        };
        if (row.categroy1 === "粗抛槽") {
          if (index === 0) {
            obj.props.rowSpan = 3;
          }
          if (index > 0 && index < 3) {
            obj.props.rowSpan = 0
          }
          if (index === 3) {
            obj.props.rowSpan = 2;
          }
          if(index === 4){
            obj.props.rowSpan = 0
          }
        } else if (row.categroy1 === "预清洗槽") {
          if (index === 5) {
            obj.props.rowSpan = 4;
          }
          if (index > 5 && index <9) {
            obj.props.rowSpan = 0
          }
          if (index === 9) {
            obj.props.rowSpan = 3;
          }
          if (index > 9 && index <= 11) {
            obj.props.rowSpan = 0
          }
        } else if (row.categroy1 === "制绒槽") {
          if (index === 12) {
            obj.props.rowSpan = 5;
          }
          if (index > 12 && index <17) {
            obj.props.rowSpan = 0
          }
          if (index === 17) {
            obj.props.rowSpan = 3;
          }
          if (index > 17 && index <= 19) {
            obj.props.rowSpan = 0
          }
        } else if (row.categroy1 === "总计") {
          let row_span = renderContent(value, row, index)
          return row_span
        }
        return obj;
      },
    },
    {
      title: "类别",
      dataIndex: "title",
      key: "title",
      colSpan: 0,
      width: 100,
      align: "center",
      render:  renderContent
    },
    {
      title: "日期",
      children: [
        {
          title: "单位",
          dataIndex: "unit",
          key: "unit",
          width: 100,
          align: "center",
          render: (value, row, index) => {
            if (row.categroy1 === "总计") {
              let row_span = renderContent(value, row, index)
              return row_span
            } else {
              if (index === 15) {
                return <div className='divs'>
                   <span className='spans'></span>
                </div>
              } else {
                return value
              }
            }
          }
        },
        {
          title: "范围",
          dataIndex: "range",
          key: "range",
          width: 100,
          align: "center",
          render: (value, row, index) => {
            if (row.categroy1 === "总计") {
              let row_span = renderContent(value, row, index)
              return row_span
            } else {
              if (index === 15) {
                return <div className='divs'>
                   <span className='spans'></span>
                </div>
              } else {
                return value
              }
            }
          }
        },
      ],
    },
    {
      title: "金额",
      dataIndex: "money",
      key: "money",
      width: 100,
      align: "center",
      render:  renderContent
    }
  ];



  return (
    <Table
      style={{ padding: "30px", width: "800px" }}
      columns={columns}
      dataSource={data}
      bordered
      size="small"
      pagination={false}
      rowKey={(row) => row.id}
    />
  );
}

export default Detail;
